<template>
  <div class="send-display-container">
    <div class="filter-container">
      <div class="label">操作人：</div>
      <div class="input-container">
        <a-input placeholder="请输入操作人名称关键字" v-model="realName"/>
      </div>
      <div class="label">日期：</div>
      <div class="input-container" v-if="date!==null">
        <a-range-picker
          :allowClear="false"
          :value="date"
          :format="dateFormat"
          @change="onChangeDate"
          :disabled-date="disabledDate" />
      </div>
      <div class="label">操作类型：</div>
      <div class="input-container">
        <a-select
          allowClear
          placeholder="请选择操作类型"
          style="width: 150px"
          :default-active-first-option="false"
          :show-arrow="true"
          :filter-option="false"
          :not-found-content="null"
          v-model="logType"
        >
          <a-select-option v-for="d in logTypeList" :key="d.sp_value">
            {{ d.sp_name }}
          </a-select-option>
        </a-select>
      </div>
      <a-button type="primary" class="btn" @click="initList">查询</a-button>
      <a-popconfirm
        title="确认要删除当前日期内的操作日志吗？"
        ok-text="是"
        cancel-text="否"
        @confirm="deleteLog"
      >
        <a-button type="primary" class="btn">删除</a-button>
      </a-popconfirm>
    </div>
    <div>
      <a-table
        :columns="columns"
        :data-source="list"
        bordered
        :pagination="pagination"
        :loading="loading"
        @change="change"
        :rowKey="(record,index)=>{return index}"
      >
        <a slot="b" slot-scope="text" href="https://www.google.com">{{ text }}</a>
        <span slot="operation" slot-scope="text, record">
          <a @click="showDetail(record.logId)">明细</a>
        </span>
      </a-table>
      <a-drawer
        width="30%"
        title="日志明细"
        placement="right"
        :visible="visible"
        destroyOnClose
        @close="onClose"
      >
        <div style="margin-top: 24px">
          <a-form-model
            ref="ruleForm"
            :model="logObj"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item label="操作人">
              <a-input
                disabled
                v-model="logObj.realName"></a-input>
            </a-form-model-item>
            <a-form-model-item label="用户名">
              <a-input
                disabled
                v-model="logObj.userName"></a-input>
            </a-form-model-item>
            <a-form-model-item label="操作时间">
              <a-input
                disabled
                v-model="logObj.logTime"></a-input>
            </a-form-model-item>
            <a-form-model-item label="模块">
              <a-input
                disabled
                v-model="logObj.module"></a-input>
            </a-form-model-item>
            <a-form-model-item label="操作类型">
              <a-input
                disabled
                v-model="logObj.logType"></a-input>
            </a-form-model-item>
            <!--            <a-form-model-item label="操作内容">-->
            <!--              <a-input-->
            <!--                disabled-->
            <!--                v-model="logObj.operate"></a-input>-->
            <!--            </a-form-model-item>-->
            <a-form-model-item ref="bz" label="备注" prop="bz">
              <a-textarea
                disabled
                v-model="logObj.bz"
                placeholder=""
                :auto-size="{ minRows: 10, maxRows: 20 }"
              />
            </a-form-model-item>
          </a-form-model>
        </div>
        <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
            zIndex: 1,
          }"
        >
          <a-button :style="{ marginRight: '8px' }" @click="onClose">
            关闭
          </a-button>
        </div>
      </a-drawer>
    </div>
    <a-back-top/>
  </div>
</template>

<script>
  import moment from 'moment'
  import 'moment/locale/zh-cn'
  import { queryList, getLogType, getLog, deleteLog } from '@/api/log.js'
  import { getLastMonth } from '@/utils/utils'

  const columns = [
    {
      title: '操作人',
      dataIndex: 'realName',
      key: 'realName',
      align: 'center'
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      key: 'userName',
      align: 'center'
    },
    // {
    //   title: 'IP',
    //   dataIndex: 'logIp',
    //   key: 'logIp',
    //   align: 'center'
    // },
    {
      title: '操作时间',
      dataIndex: 'logTime',
      key: 'logTime',
      align: 'center'

    },
    {
      title: '模块',
      dataIndex: 'module',
      key: 'module',
      align: 'center'
    },
    {
      title: '操作类型',
      dataIndex: 'logType',
      key: 'logType',
      align: 'center',
      scopedSlots: { customRender: 'logType' }

    },
    // {
    //   title: '操作内容',
    //   dataIndex: 'operate',
    //   key: 'operate',
    //   align: 'center'
    //
    // },
    {
      title: '操作',
      dataIndex: 'operation',
      key: 'operation',
      align: 'center',
      scopedSlots: { customRender: 'operation' }

    }

  ]
  export default {
    name: 'Log',
    data () {
      return {
        visible: false,
        loading: false,
        logType: '',
        operation: '',
        realName: '',
        list: [],
        date: null,
        wrapperCol: { span: 14 },
        labelCol: { span: 4 },
        dateFormat: 'YYYY-MM-DD',
        logTypeList: [],
        logObj: {},
        columns,
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total, range) => `显示第${range[0]}至${range[1]}项结果，共${total}项`
        }
      }
    },
    mounted () {
      const query = this.$route.query
      if (query.name) {
        this.realName = query.name
        this.logType = '1'
        this.logObj.userName = query.name
        this.logObj.logType = '1'
        this.date = [moment(query.start_time), moment(query.end_time)]
      } else {
        this.getLastMonth()
      }

      this.initList()
      this.getLogTypeList()
    },
    methods: {
      onClose () {
        this.visible = false
      },
      showDetail (logId) {
        this.getLog(logId)
        this.visible = true
      },
      getLog (logId) {
        this.loading = true
        const params = {
          logId: logId
        }
        getLog(params).then(res => {
          this.loading = false
          if (res.retCode === 0) {
            this.logObj = res.retObj
          }
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      },
      getLogTypeList () {
        this.loading = true
        const params = {
          spType: '1001'
        }
        getLogType(params).then(res => {
          this.loading = false
          if (res.retCode === 0) {
            this.logTypeList = res.retObj
          }
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      },
      initList () {
        this.pagination.current = 1
        this.getList()
      },
      deleteLog () {
        this.loading = true
        const params = {
          startDate: this.date[0],
          endDate: this.date[1]
        }
        deleteLog(params).then(res => {
          this.loading = false
          if (res.retCode === 0) {
            this.getList()
          }
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      },
      getLastMonth () {
        this.date = getLastMonth()
      },
      getList () {
        this.loading = true
        const params = {
          startDate: this.date[0].format('YYYY-MM-DD'),
          endDate: this.date[1].format('YYYY-MM-DD'),
          realName: this.realName,
          logType: parseInt(this.logType),
          currentPage: this.pagination.current.toString(),
          pageSize: this.pagination.pageSize.toString()
        }
        queryList(params).then(res => {
          this.loading = false
          if (res.retCode === 0) {
            this.list = res.retObj.data
            this.pagination.total = parseInt(res.retObj.count)
          }
        }).catch(error => {
          this.loading = false
          console.log(error)
        })
      },
      change (pagination) {
        this.pagination = pagination
        this.getList()
      },
      handleReset () {
        this.realName = ''
        this.date = null
        this.logType = ''
        this.getLastMonth()
        this.initList()
      },
      handleChange (value) {
        this.logType = parseInt(value)
      },
      onChangeDate (date, dateString) {
        this.date = dateString
      },
      disabledDate (current) {
        // Can not select days after today
        return current && current >= moment().endOf('day')
      }

    }
  }
</script>

<style scoped lang="less">
  .send-display-container {
    width: 100%;
    background-color: #ffffff;
    padding: 24px;
  }

  .filter-container {
    display: flex;
    align-items: center;
    padding-bottom: 24px;
    justify-content: left;

    .label {
      padding-right: 20px;

      white-space: nowrap;
    }

    .input-container {
      width: 240px;
      margin-right: 20px
    }

    .btn {
      margin-right: 20px;
    }
  }
</style>
